<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-07-30 16:14:24
 * @FilePath: \ft-apply-admin\src\views\ApplicationList\ApplicationList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="personal-center">
    <div>
      <p class="font-size-20px mb-8px font-bold">修改当前用户密码</p>
      <p>修改成功后会自动退出当前登录！</p>
    </div>
    <input type="text" name="fake-username" style="display:none;">
    <input type="password" name="fake-password" style="display:none;">
    <a-form 
      layout="vertical" 
      :model="formState" 
      class="w-425px" 
      :rules="rules"
      @finish="onFinish">
      <a-form-item label="当前密码" name="oldPassword">
        <a-input v-model:value="formState.oldPassword" placeholder="请输入当前密码" name="username" autocomplete="off"/>
      </a-form-item>
      <a-form-item label="新密码" name="newPassword">
        <a-input-password
          v-model:value="formState.newPassword"
           placeholder="请输入密码"
            name="password" 
            autocomplete="new-password"
        />
        <div class="tips">包含6-12个字符、数字、字母</div>
      </a-form-item>
      <a-form-item label="确认密码" name="virtuallyPassword">
        <a-input-password
          v-model:value="formState.virtuallyPassword"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item>
        <a-button v-auth="'submitEditPassword'" type="primary" html-type="submit" class="submin-btn">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';
import { reactive } from '@vue/runtime-core';
import { resetPassword } from '@/api/applay/login/login'
import { useUserStore } from '@/store/modules/user.ts'
import { message } from 'ant-design-vue';
import { useRouter } from "vue-router"

// 数据初始化
const formState = reactive({
  oldPassword: '',
  newPassword: '',
  virtuallyPassword: ''
})

// 校验规则
let validatePass = async (_rule: Rule, value: string) => {
  if (value === '') {
    // @ts-ignore
    if(_rule.field == 'oldPassword'){
      return Promise.reject('请输入当前密码')
    }
    return Promise.reject('请输入密码')
  } else {
    // @ts-ignore
    if(_rule.field == 'newPassword'){
      let regex = /^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{6,12}$/
      if(!regex.test(value)){
        return Promise.reject('格式错误')
      } 
      // @ts-ignore
    }else if(_rule.field == 'virtuallyPassword'){
      if(value != formState.newPassword){
        return Promise.reject('两次密码不一致')
      }
    }
    return Promise.resolve();
  }
}

// rules集合
const rules: Record<string, Rule[]> = {
  oldPassword: [{ required: true,  validator: validatePass, trigger: 'change' }],
  newPassword: [{ required: true, validator: validatePass, trigger: 'change' }],
  virtuallyPassword: [{ required: true, validator: validatePass, trigger: 'change' }],
}

// 提交
const router = useRouter()
const user = useUserStore().getUserInfo
async function onFinish(values: any) {
  const params = {
    userId: user.userId,
    ...values
  }
  const res = await resetPassword(params)
  if(res?.code && res.code != '10000'){
    message.error(res.msg)
  }else{
    message.success('修改成功')
    router.push('/login')
    setTimeout(() => {
      useUserStore().logout(true)
    }, 100)
  }
}

</script>

<style lang="less" scoped>
.personal-center{
  
  color:#333;
  background-color: var(--component-background);
  padding: 39px 30px;
  height: 84vh;
  min-height: 520px;
  :deep(.submin-btn){
    margin-top: 15px;
    margin-inline-start: 0;
    width: 425px;
  }
  .tips{
    height: 20px;
    margin-top: 15px;
    
    font-weight: 400;
    font-size: 14px;
    color: #B3C0C8;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>